<template>
  <el-dialog
    ref="elDialogRef"
    v-model="visible"
    :title="title"
    :width="width"
    :append-to-body="appendToBody"
    :show-close="showClose"
    :before-close="handleClose"
  >
    <slot />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="hide" />
        <el-button type="primary" @click="confirm"></el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
// props
defineProps({
  title: {
    type: String,
    default: ''
  },
  width: {
    type: [String, Number],
    default: '50%'
  },
  appendToBody: {
    type: Boolean,
    default: true
  },
  showClose: {
    type: Boolean,
    default: true
  }
})
// emits
const emit = defineEmits(['confirm'])

const elDialogRef = ref()
const visible = ref(false)
const hide = () => {
  visible.value = false
}

const handleClose = () => {
  hide()
}
const confirm = () => {
  hide()
  emit('confirm')
}
</script>
